<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>this is encipher</h1>

<div id="main">
    <div><label>用户名：</label><input type="text" id="username" value="admin"/></div>
    <div><label>密码：</label><input type="text" id="passwd" value="admin123456"/></div>
    <div><label>标识：</label><input type="text" id="identity" value="baidu"/></div>
    <div class="cipher"><label>密文：</label><input readonly/></div>
    <div>
        <button id="submit">提交</button>
    </div>
</div>

<script type="text/javascript" src="./reference/libs/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#submit').on("click", submit);
    });

    function submit() {
        var username = $('#username').val();
        var passwd = $('#passwd').val();
        var identity = $('#identity').val();

        $.ajax({
            url: 'cipher',
            type: 'post', async: false, dataType: 'json',
            data: {username: username, passwd: passwd, identity: identity},
            success: function (res) {
                console.log(res); // TODO
                $('.cipher input').val(res.data);
            },
            error: function (res) {
                console.log(res); // TODO
            }
        });
    }
</script>
</body>
</html>